<template>
  <div>
    我是根组件
    <hr>
    <!-- 使用TodoButton组件 -->
    <todo-button @setTask="getTask"></todo-button>
    <!-- 使用TodoList组件 -->
    <todo-list :list='tasklist'></todo-list>
    <!-- 使用TodoTab组件 -->
    <todo-tab v-model:active=activeindex></todo-tab>
  </div>
</template>

<script>
// 导入备忘录列表组件
import TodoList from './components/todo-list/TodoList.vue'
// 导入任务列表头部提交组件
import TodoButton from './components/todo-button/TodoButton.vue'
// 导入底部tab栏组件
import TodoTab from './components/todo-tab/TodoTab.vue'

export default {
  name: 'App',
  components: {
    // 注册TodoList组件
    TodoList,
    // 注册TodoButton组件
    TodoButton,
    // 注册TodoTab组件
    TodoTab
  },
  data() {
    return {
      // 任务列表数据
      todolist: [
        { id: 1, task: '周一早晨10点开会', done: false },
        { id: 2, task: '周二晚上8点聚餐', done: false },
        { id: 3, task: '准备下周三的会议总结', done: false },
        { id: 4, task: '准备周三上午的演讲稿', done: true },
        { id: 5, task: '周四上午9点参加会议', done: true },
        { id: 6, task: '周六晚上7点给宠物洗澡', done: true }
      ],
      // 新增任务的id
      nextId: 7,
      activeindex: 0
    }
  },
  computed: {
    tasklist() {
      switch (this.activeindex) {
        case 0:
          return this.todolist
        case 1:
          return this.todolist.filter(x => 
            x.done === true
          )
        case 2:
          return this.todolist.filter(x => 
            x.done !== true
          )
      }
    }
  },
  methods: {
    //  获取任务
    getTask(val) {
      this.todolist.push({
        id: this.nextId,
        task: val,
        done: false
      })
      this.nextId++
    }
  }
}
</script>

<style lang="less" scoped>
</style>
